<template>
  <div class="scroll-wrapper">
    <!--
      van-list自带上拉加载更多 的效果
      原理：
        1）数据项在list中
        2）在显示数据时，如果当前的数据不足一屏，它会 自动调用 onLoad去加载数据
           在onload是要通过ajax取回新数据
           - 把数据追加到list中（list的内容会越来越多）
           - 把loading手动设置为false
           - 判断是否所有的数据已经加载完成，如果是，则把finished设为true
        3) 如果手动向上拉，且finished不为true, 也会去调用onLoad
    -->
    <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
        v-for="item in list"
        :key="item.art_id"
        :title="item.title">
          <div slot="label">
            <van-grid :column-num="item.cover.images.length">
              <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
                <van-image LazyLoad :src="img" />
              </van-grid-item>
            </van-grid>
            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate | relativeTime}}</span>
              <span class="close" @click="hClose(item)" v-if="$store.state.tokenInfo.token">
                <van-icon name="cross"/>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/store/article'
export default {
  data () {
    return {
      count: 0,
      isLoadingNew: false, // 是否正在加载最新的数据（下拉刷新）
      time: null,
      timestamp: null,
      list: [],
      loading: false,
      finished: false
    }
  },
  name: 'ArticleList',
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  created () {
    console.log('articleList被创建了', Date.now())
  },
  methods: {
    hClose (article) {
      const articleId = article.art_id.toString()
      this.$emit('ZshowMoreAction', articleId)
    },
    async onLoad () {
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const result = await getArticles(this.channel.id, this.timestamp)
      this.timestamp = result.data.data.pre_timestamp
      const arr = result.data.data.results
      this.list.push(...arr)
      this.loading = false
      if (arr.length === 0) {
        this.finished = true
      }
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },
    async onRefresh () {
      const result = await getArticles(this.channel.id, Date.now())
      const arr = result.data.data.results
      this.list.unshift(...arr)
      this.isLoadingNew = false
      this.$toast(`更新了${arr.length}条数据`)
      // 1.重发请求,获取最新的数据
      // 2.放在list的最前面
      // 3.结束loading：isLoadingNew = false
    }
  }
}
</script>

<style scoped lang='less'>
  .meta {
    display: flex;
    span{
      margin-right: 10px;
    }
    .close {
      margin-left: auto;
    }
  }
</style>
